<script setup lang='ts'>

import { goTo } from '../../../hooks/useNavigator'
import NavBar from '../../components/NavBar.vue'
import { ref } from 'vue'

const edit = ref()
</script>

<template>
  <NavBar class="nav">
    <template v-slot:body>
      <view class="search">
        <view class="input">
          <image mode="widthFix" class="icon" src="/static/image/navbar/search.png"/>
          <input placeholder="请输入产品名称" />
        </view>
        <span class="add" @click="goTo('/pages/index/DeviceManager/Add')">
        <image class="icon" mode="widthFix" src="/static/image/home/icon/category.png"/>新增</span>
      </view>
    </template>
  </NavBar>
  <view class="nav-padding list">
    <view class="item">
      <span>脉动功能饮料</span>
      <view class="action">
        <button class="btn" @click="edit?.open">编辑</button>
        <button class="btn">删除</button>
      </view>
    </view>
    <view class="item">
      <span>脉动功能饮料</span>
      <view class="action">
        <button class="btn" @click="edit?.open">编辑</button>
        <button class="btn">删除</button>
      </view>
    </view>
  </view>
  <uni-popup ref="edit" type="dialog">
    <uni-popup-dialog type="info" title="分类编辑" style="width: 680rpx" cancel-text="取消" confirm-text="保存">
      <view class="dialog-form">
        <view class="dialog-form-item">
          <span class="label">分类名称</span>
          <input class="input" style="width: 398rpx" placeholder="请输入分类名称"/>
        </view>
      </view>
    </uni-popup-dialog>
  </uni-popup>
</template>

<style scoped lang='scss'>
.add {
  font-size: 24rpx;
  color: #FF9832;
  display: flex;
  .icon {
    margin: 0 6rpx 0 24rpx;
  }
}
.list {
  background: #fff;
  .item {
    display: flex;
    align-items: center;
    padding: 28rpx 32rpx;
    justify-content: space-between;
    box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
    span {
      font-size: 28rpx;
      color: #3B3D3D;
      font-weight: bold;
    }
    .action {
      display: flex;
      column-gap: 24rpx;
    }
  }
}
</style>